{% extends 'back/index.html' %}

{% block content %}
 <div class="rt_content">
      <div class="page_title">
       <h2 class="fl">网站访问流量统计</h2>
      </div>
	<input type="button" value="生成网站访问流量折线图" class="group_btn"/>
    <div class="dataStatistic">
        <div id="line">
        </div>
    </div>
 </div>

<script src="/static/back/js/amcharts.js" type="text/javascript"></script>
<script src="/static/back/js/serial.js" type="text/javascript"></script>
<script src="/static/back/js/pie.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        GetSerialChart();
        MakeChart(json);
    });
    var json = [
  { "name": "周一", "value": "35" },
  { "name": "周二", "value": "60" },
  { "name": "周三", "value": "22" },
  { "name": "周四", "value": "65" },
  { "name": "周五", "value": "35" },
  { "name": "周六", "value": "22" },
  { "name": "周日", "value": "43" },
  ]
    //折线图
    AmCharts.ready(function () {
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = json;
        chart.categoryField = "name";
        chart.angle = 30;
        chart.depth3D = 20;
        //标题
        //chart.addTitle("3D折线图Demo", 15);  
        var graph = new AmCharts.AmGraph();
        chart.addGraph(graph);
        graph.valueField = "value";
        //背景颜色透明度
        graph.fillAlphas = 0.3;
        //类型
        graph.type = "line";
        //圆角
        graph.bullet = "round";
        //线颜色
        graph.lineColor = "#8e3e1f";
        //提示信息
        graph.balloonText = "[[name]]: [[value]]";
        var categoryAxis = chart.categoryAxis;
        categoryAxis.autoGridCount = false;
        categoryAxis.gridCount = json.length;
        categoryAxis.gridPosition = "start";
        chart.write("line");
    });

</script>
    <script>
        (function ($) {
            $(window).load(function () {
                $('#drop5').collapse('show');
                $('#5-1').addClass('active');
            });
        })(jQuery);
    </script>
{% endblock %}
